<template>
  <section class="section">
    <h2 class="section-title">技术架构</h2>
    <div class="architecture-content">
      <div class="architecture-text">
        <p>我们采用现代化的技术架构，确保系统的高性能、可扩展性和安全性。技术栈涵盖前端、后端、数据库和基础设施等多个层面。</p>
        <h3>前端技术</h3>
        <p>基于Vue3和React的现代化前端框架，结合TypeScript提升代码质量和开发效率。使用Webpack和Vite进行模块打包和构建优化。</p>
        <h3>后端技术</h3>
        <p>采用Node.js、Spring Boot和Go等技术构建高性能的后端服务。通过微服务架构实现服务解耦和独立部署。</p>
        <h3>数据库与缓存</h3>
        <p>使用MySQL、PostgreSQL和MongoDB满足不同业务场景的数据存储需求。结合Redis和Memcached提升系统缓存性能。</p>
        <h3>基础设施</h3>
        <p>基于Docker和Kubernetes实现容器化部署和集群管理。通过Nginx和Traefik进行负载均衡和反向代理。</p>
      </div>
      <div class="architecture-image">
        <img src="https://shuigu-agent-rag.oss-cn-guangzhou.aliyuncs.com/kroki/mermaid/uqWT9qSE.svg" alt="技术架构图" @error="handleImageError">
      </div>
    </div>
  </section>
</template>

<script setup>
// 技术架构页面
const handleImageError = (event) => {
  event.target.src = 'https://images.pexels.com/photos/3184454/pexels-photo-3184454.jpeg?auto=compress&cs=tinysrgb&h=400'
}
</script>

<style scoped>
.architecture-content {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.architecture-text {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.8;
}

.architecture-text h3 {
  margin: 1.5rem 0 0.5rem;
  color: #2c3e50;
}

.architecture-text p {
  margin-bottom: 1rem;
}

.architecture-image {
  flex: 1;
}

.architecture-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .architecture-content {
    flex-direction: column;
  }
}
</style>